
<script src="https://backend.tianqi.h5.dianjiuwan.cn/static/js/jquery.min.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<div id="container1">
    <script type="text/javascript">
        $(function () {
            $('#container1').highcharts({
                credits: {
                    enabled: false
                },
                chart: {
                    zoomType: 'xy'
                },
                title: {
                    text: '近日充值概况'
                },
                subtitle: {
                    text: ' '
                },
                xAxis: [
                    {
                        categories: ["2018-07-06","2018-07-07","2018-07-08","2018-07-09","2018-07-10","2018-07-11","2018-07-12","2018-07-13","2018-07-14","2018-07-15","2018-07-16","2018-07-17","2018-07-18","2018-07-19","2018-07-20","2018-07-21","2018-07-22","2018-07-23","2018-07-24","2018-07-25","2018-07-26","2018-07-27","2018-07-28","2018-07-29","2018-07-30","2018-07-31","2018-08-01","2018-08-02","2018-08-03","2018-08-04"],
                        crosshair: true
                    }
                ],
                plotOptions: {
                    line: {
                        dataLabels: {
                            format: '{y} 人',
                            enabled: true, // 开启数据标签
                        },
                        enableMouseTracking: true // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                    },
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666'
                        }
                    }
                },
                yAxis: [
                    { // Primary yAxis
                        gridLineWidth: 0,
                        title: {
                            text: '人数',
                            style: {
                                color: Highcharts.getOptions().colors[0]
                            }
                        },
                        allowDecimals:false,
                        labels: {
                            format: '{value}',
                            style: {
                                color: Highcharts.getOptions().colors[0]
                            }
                        },
                        opposite: true

                        //tickPositions: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200],

                    },
                    { // Secondary yAxis
                        labels: {
                            format: '{value}',
                            style: {
                                color: Highcharts.getOptions().colors[0]
                            }
                        },
                        title: {
                            text: '金额',
                            style: {
                                color: Highcharts.getOptions().colors[0]
                            }
                        },
//                                        tickPositions: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200],
                    }
                ],
                tooltip: {
                    shared: true
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
                },
                series: [
                    {
                        name: '充值金额',
                        type:'column',
                        yAxis: 1,
                        data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                        tooltip: {
                            valuePrefix: ''
                        }

                    },
                    {
                        name: '充值人数',
                        type: 'line',
                        color:'#FF9900',
                        data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                        tooltip: {
                            valuePrefix: ''
                        }
                    }

                ]
            });





        });
    </script>

</div>